<template>
  <div class="base-element" :class="`base-element-${elementInfo.id}`" :style="{ zIndex: elementIndex }">
    <component :is="currentElementComponent" :elementInfo="elementInfo" target="thumbnail"></component>
  </div>
</template>

<script setup lang="ts">
import { PropType, computed } from 'vue'
import { PPTElement, ElementTypes } from '@/types/slides'

import BaseVideoElement from '../element/VideoElement/BaseVideoElement.vue'
import BaseAudioElement from '../element/AudioElement/BaseAudioElement.vue'
import BaseLatexElement from '../element/LatexElement/BaseLatexElement.vue'
import BaseTextElement from '../element/TextElement/BaseTextElement.vue'
import BaseLineElement from '../element/LineElement/BaseLineElement.vue'
import BaseShapeElement from '../element/ShapeElement/BaseShapeElement.vue'
import BaseTableElement from '../element/TableElement/BaseTableElement.vue'
import BaseChartElement from '../element/ChartElement/BaseChartElement.vue'
import BaseImageElement from '../element/ImageElement/BaseImageElement.vue'

// eslint-disable-next-line no-undef
const props = defineProps({
  elementInfo: {
    type: Object as PropType<PPTElement>,
    required: true
  },
  elementIndex: {
    type: Number,
    required: true
  }
})
const currentElementComponent = computed(() => {
  const elementTypeMap = {
    [ElementTypes.SHAPE]: BaseShapeElement,
    [ElementTypes.IMAGE]: BaseImageElement,
    [ElementTypes.TEXT]: BaseTextElement,
    [ElementTypes.LINE]: BaseLineElement,
    [ElementTypes.CHART]: BaseChartElement,
    [ElementTypes.TABLE]: BaseTableElement,
    [ElementTypes.LATEX]: BaseLatexElement,
    [ElementTypes.VIDEO]: BaseVideoElement,
    [ElementTypes.AUDIO]: BaseAudioElement
  }
  return elementTypeMap[props.elementInfo.type] || null
})
</script>